<template>
  <div>
  <div class="header"  style="line-height:35px;">
    <template v-if="!(useStore.userInfo.token)" >
      <div >
        <router-link to="/" target="_blank" style="margin-left: 15px;  ">首页</router-link>
        <router-link to="/Login"  style="margin-left:1000px;">请先登录</router-link> 
      <router-link to="/Register" style="margin-left: 15px; color: whitesmoke;">注册</router-link>
  <a style="margin-left: 15px;" @click="error">我的订单</a>
  <a style="margin-left: 15px;" @click="error">我的地址</a>
    </div>
  </template>
  <template v-else>
    <div>
      <div>
        <router-link to="/" style="margin-left: 15px; color: #1C1C1C; ">首页</router-link>
        <router-link to="/Center" style="margin-left: 1000px;"><el-avatar> Jay </el-avatar></router-link> 
      <el-popconfirm
      @confirm="confirm"
    width="220"
    confirm-button-text="确定"
    cancel-button-text="取消"
    :icon="InfoFilled"
    icon-color="#626AEF"
    title="确定退出吗？"
  >
    <template #reference>
   <a style="margin-left: 15px; color:#1C1C1C ">退出登录</a>
    </template>
  </el-popconfirm>
  <router-link to="/Order" target="_blank" style="margin-left: 15px; color:#1C1C1C ">我的订单</router-link>
  <router-link to="/Address" target="_blank"  style="margin-left: 15px; color:#1C1C1C ">我的地址</router-link>

    </div>
    </div>
  </template>
      <br>
    <!-- <div> -->
      <!-- <keep-alive include="Login"> -->
      <!-- 缓存组件名称 -->
      <!-- </keep-alive> --
    </div> -->
  </div>
<div class="banner">
   <router-view ></router-view>
</div>
</div>
</template>
<script>
import  {ElMessage}  from 'element-plus'
import {useUserStore} from '@/stores/user'
import router from '@/router'

export default {
   name:'MyLayout',
   data(){
    return{
      useStore:useUserStore()
    }
   },
methods:{
  confirm(){
    const user=useUserStore();
    console.log(user.userInfo);
  user.clearUserInfo()
  console.log(user.userInfo);
  router.push('/')
  },
  error(){
    ElMessage({type:'error',message:'请先登录'})
  }
}
}
</script>

<style>
.header{
  height: 40px;
  /* background: 	#EEE9E9; */
  background: 		#D3D3D3;
  border-radius: 10px;
  /* color: whitesmoke; */
}
a {
text-decoration: none; /* 去除默认的下划线 */
color: black;
}
</style>